<template>
  <body class="cards_fold">
    <div class="container_card">
      <div
        class="glass"
        style="--r: -15"
        data-text="Recognition"
        @click="startRealTimeCapture"
      >
        <i class='bx bxs-face'></i>
      </div>
      <div class="glass" style="--r: 25" data-text="Tutorial">
        <i class='bx bx-book-reader'></i>
      </div>
      <div class="glass" style="--r: -15" data-text="User Center">
        <i class='bx bxs-user-detail' ></i>
      </div>
    </div>
  </body>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    startRealTimeCapture() {
      this.axios
        .post("http://127.0.0.1:8000/recognition/")
        .then((res) => {
          console.log(res.data);
          // 这里可以根据需要处理成功或失败的情况
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    },
  },
};
</script>

<style>
@import url("https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css");
.cards_fold {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #0f222f;
}
.container_card {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container_card .glass {
  position: relative;
  width: 200px;
  height: 240px;
  background: linear-gradient(#fff2, transparent);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 25px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(10px);
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 0.5s;
  border-radius: 10px;
  margin: 0 -45px;
  transform: rotate(calc(var(--r) * 1deg));
}
.container_card:hover .glass {
  transform: rotate(0deg);
  margin: 0 20px;
}
.container_card .glass::before {
  content: attr(data-text);
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 40px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.container_card .glass i {
  font-size: 4em;
  color: #fff;
}
</style>
